// 密码小眼睛
(function () {
  // 获取元素
  const eye = document.querySelector('#eye');
  const pwd = document.querySelector('#pwd');
  // 开关
  let flag = 0;
  eye.addEventListener('click', function () {
    if (flag == 0) {
      // 睁眼
      pwd.type = 'text';
      flag = 1;
      // img.src = 'images/眼睛-睁眼.png';
      eye.innerHTML = '&#xe8bf;'
    } else {
      // 闭眼
      pwd.type = 'password';
      flag = 0;
      // img.src = 'images/闭眼.png';
      eye.innerHTML = '&#xe6e3;'
    }
  })
})()


  // 弹窗
  , (function () {
    const form = document.querySelector('form')
    const agree = document.querySelector('[name=agree]')
    const uname = document.querySelector('[name=uname]')
    const login = document.querySelector('[name=login]')
    const regist = document.querySelector('[name=regist]')

    // 封装一个弹窗函数
    // 获取提示框
    const myAlert = document.querySelector('.alert')
    function alertFn(msg, isSuccess) {
      console.log(msg, isSuccess);
      // 显示提示框
      myAlert.classList.add('show')
      // 实现想要显示的文字
      myAlert.innerText = msg
      // 添加类名
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)
      // 过2秒隐藏
      setTimeout(() => {
        myAlert.classList.remove('show')
        // 避免类名冲突，重置背景色 2秒后消失
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }

    // 提交表单事件 登入跳转
    form.addEventListener('submit', function (e) {
      // 阻止默认事件
      e.preventDefault()
      // 获取用户名和密码
      const username = document.querySelector('.username').value
      const password = document.querySelector('.password').value
      // console.log(username, password)

      // 判断长度
      if (username.length < 4) {
        alertFn('用户名必须大于等于4位', false)
        return // 阻止代码继续执行
      }
      // 定义用户名规则 
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      console.log(password);
      // 如果正则表达式与指定的字符串匹配 返回 true
      if (!reg.test(password)) {
        alertFn('密码必须是6-10位字母数字下划线', false)
        return // 阻止代码继续执行
      }
      if (!agree.checked) {
        return alertFn('请勾选用户协议', false)
      }
      else {
        alertFn('登入成功', true)
        setTimeout(() => {
          // 登入跳转
          location.href = 'https://www.baidu.com/'
        }, 1200);
      }
    })
    // 注册按钮 跳转
    regist.addEventListener('click', function (e) {
      //阻止默认事件
      e.preventDefault()
      //跳转注册页面
      location.href = './regist.html'
    })
  })()


  // 二维码账号切换
  , (function () {
    // 获取元素
    const tab_nav = document.querySelector('.tab-nav')
    const tab_pane = document.querySelectorAll('.tab-pane')
    // 当登入方式被点击 切换 显示
    tab_nav.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 取消上一个 active
        tab_nav.querySelector('.active').classList.remove('active')
        //当前元素添加 active
        e.target.classList.add('active')
        //干掉所有
        for (let i = 0; i < tab_pane.length; i++) {
          tab_pane[i].style.display = 'none'
        }
        //让对应的序号显示
        tab_pane[e.target.dataset.id].style.display = 'block'
      }
    })
  })()